<!-- 账号设置页面 -->
<!-- 小旗子 2020/8/23日更新-->
<!-- 8.24
		1.输入框字体调整
		2.按钮和底部整体样式调整-->
<!-- 8.27
		 1.修改密码接口请求成功-->
<!-- 9.2
		 1.解决密码格式错误也能提交的bug
		 2.修改退出登录功能-->
<!-- 9.7
		  1.修改按钮样式-->
<template>
	<view class="account">
		<view class="accountSetting">
			<view class="change">
				<text class="">修改密码：</text>
			</view>
			<!-- 原密码 -->
			<view class="Code">
				<input type="password" value="" placeholder="请输入原密码" v-model="password" @change="checkForm" />
			</view>
			<!-- 格式错误提示信息 -->
			<view v-show="form" class="errorForm">
				<text>请输入6~12位数字+字母组合</text>
			</view>

			<!-- 更改密码 -->
			<view class="newCode">
				<input type="password" id="input1" placeholder="请输入新密码" v-model="password1" @change="checkForm1" />
			</view>
			<!-- 格式错误提示信息 -->
			<view v-show="form1" class="errorForm">
				<text>请输入6~12位数字+字母组合</text>
			</view>

			<!-- 再次输入更改密码 -->
			<view class="reset">
				<input type="password" id="input2" placeholder="再次输入密码" v-model="password2" @change="checkCode" />
			</view>

			<!-- 两次输入相同显示信息 -->
			<view v-show="checkCode()" class="errorForm">
				<text>请确认两次输入密码相同</text>
			</view>
		</view>
			<!-- 确认和注销 -->
		<view class="accountBottom">
			<button @tap="confirm" type="" class="submit_button">确认修改</button>
			<view class="logout">
				<text @tap="del">退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { _ajax } from '../../in-xupt-functions.js'
	export default {
		props: {
			userId: String // 注销的用户ID
		},
		data() {
			return {
				confirmForm: false,
				form: false, //原密码格式判断
				form1: false, //新密码格式判断
				password: '', //原密码
				password1: '', //新密码
				password2: '', //第二次输入的新密码
			}
		},
		methods: {
			// 确认修改密码
			confirm: function() {
				console.log("检查")
				if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(this.password)) {
					this.confirmForm = false
					console.log(this.confirmForm)
					_ajax({
							url: '/user/password',
							method: 'PUT',
							data: {
								// 检查新密码
								'checkPassword': this.password1,
								// 新密码
								'password': this.password2
							}
						})
						.then(res => {
							console.log(res)
							// 如果设置成功，跳转至我的页
							if (res.data.status == 0) {
								uni.showToast({
									
									icon: 'none',
									title: '修改成功'
								})
							} else {
								// 如果设置失败则提示失败信息
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							}
							uni.navigateBack({
								delta: 1,
								animationType: 'slide-out-right'
							})
						})
				} else {
					uni.showToast({
						icon: 'none',
						title: '密码格式不正确'
					})
					this.confirmForm = true
					console.log(this.confirmForm)
				}
			},
			//弹窗 
			del: function() {
				let _this = this
				uni.showModal({
					title: '退出登录',
					content: '退出后将不保留任何编辑记录！',
					// cancelColor: "#F76B8A",
					// confirmColor: "#F76B8A",
					// confirmText: "确认",
					cancelText: "手滑了",
					// content: "确认退出吗？",
					// 8.26 跳转至新鲜事主页面
					success: function(res) {
						if (res.confirm) {
							// 清除token C_AEHistory N_AEHistory userId historyTopic
							uni.removeStorageSync('token');
							uni.removeStorageSync('C_AEHistory');
							uni.removeStorageSync('N_AEHistory');
							uni.removeStorageSync('userId');
							uni.removeStorageSync('historyTopic');
							uni.navigateTo({
								url: '../Login/Login'
							})
						} else if (res.cancel) {
							return
						}
					}
				})
			},
			// 校验前后输入密码是否相同
			checkCode() {
				if (this.password1 != this.password2) {
					return true
				} else if (this.password1 == this.password2) {
					return false
				}
			},
			// 校验输入密码的格式（原密码）
			checkForm() {
				if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(this.password)) {
					this.form = false
				} else {
					this.form = true
				}

			},
			//校验输入密码的格式（更改的密码） 
			checkForm1() {
				if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(this.password1)) {
					this.form1 = false
				} else {
					this.form1 = true
				}
			},
		},
	}
</script>

<style lang="less">
	.account {
		width: 450rpx;
		margin: 0 auto;
		z-index: 1;
		padding-top: 15%;
		.accountSetting {
			view {
				padding-top: 50rpx;
				input {
					font-size: 32rpx;
					border-bottom: 1px solid #f2f2f2;
				}
				input:hover {
					border-bottom: 1px solid #F76B8A;
				}
			}

			.change {
				font-size: 32rpx;
				font-weight: bold;
			}

			.errorForm {
				font-size: 24rpx;
				color: #7f7f7f;
				margin: 0;
				padding: 0;
			}
		}
		.accountBottom {
			// position: fixed;
			// bottom: 80rpx;
			// left: 20%;
			margin-top: 80%;
			button {
				font-size: 32rpx;
				width: 450rpx;
				height: 88rpx;
				background-color: #FA7298;
				color: #FFFFFF;
			}
			.logout {
				color: @g-gray;
				font-size: 24rpx;
				padding-top: 20rpx;
				width: 100%;
				text-align: center;
			}
		}
	}
</style>
